<template>
    <tableTmp v-if="pageSet"
              :selection="true"
              name="bizOrder"
              title="业务接单"
              :list="order"
              :total="pageSet.count"
              class="bizOrder"
              @change="changePage"
              @getSelectVal="getSelectVal">
        <template slot="right">
            <a class="bizOrder-btn"
               @click="addBizOrder">新建</a>
            <a class="bizOrder-btn"
               @click="referCheck">提交审核</a>
        </template>
        <div slot="extra"
             class="bizOrder-extra">
            <el-input placeholder="请输入客户名称, 按 enter 搜索"
                      size="small"
                      v-model="searchVal"
                      @keyup.enter.native="search"></el-input>
            <span>订货日期查询</span>
            <el-date-picker v-model="date"
                            :unlink-panels="true"
                            :clearable="true"
                            type="daterange"
                            size="small"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            @change="searchdate">
            </el-date-picker>
        </div>
        <template slot="table"
                  slot-scope="scope">
            <el-button type="text"
                       @click="print(scope)"
                       v-show="scope.props.row.status === '2'">打印</el-button>
            <el-button type="text"
                       @click="editBizOrder(scope)"
                       :disabled="!scope.props.row.is_mine || scope.props.row.status !== '0'">编辑</el-button>
            <el-button type="text"
                       @click="delBizOrder(scope)"
                       :disabled="!scope.props.row.is_mine || scope.props.row.status !== '0'"
                       class="danger">删除</el-button>
        </template>
    </tableTmp>
</template>
<script>

export default {
    name: 'bizOrder',
    data() {
        return {
            date: [],
            searchVal: '',
            selectVal: null,
            printInfo: null
        }
    },
    computed: {
        order() {
            return this.$store.state.order.order
        },
        pageSet() {
            return this.$store.state.order.pageSet
        }
    },
    methods: {
        changePage(curPage) {
            this.init({
                page: curPage
            })
        },
        getSelectVal(val) {
            this.selectVal = val
        },
        print({ props }) {
            this.$http.post('/business/info', {
                id: props.row.id
            }).then(data => {
                this.$root.$emit('setPrint', data.data.data)
                setTimeout(() => {
                    window.print()
                    this.$root.$emit('setPrint', null)
                }, 0)
            })
        },
        editBizOrder({ props }) {
            this.$root.$emit('setData', { title: '修改业务单' })
            this.$router.push({ query: { action: 'actionOrder', id: props.row.id } })
        },
        delBizOrder({ props }) {
            this.$confirm('将永久删除该业务单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('delOrder', { id: props.row.id }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
            }).catch(() => {
                console.log('已取消删除')
            })
        },
        addBizOrder() {
            this.$root.$emit('setData', { title: '新建业务单' })
            this.$router.push({ query: { action: 'actionOrder' } })
        },
        search() {
            this.$store.dispatch('getOrder', {
                name: this.searchVal
            })
        },
        searchdate(val) {
            if (val && val.length === 2) {
                this.$store.dispatch('getOrder', {
                    start_time: val[0],
                    end_time: val[1]
                })
            }
        },
        referCheck() {
            if (!this.selectVal || this.selectVal.length === 0) {
                this.$message({
                    message: '请选择要审核的业务单',
                    type: 'warning'
                })
                return
            }
            const idStr = this.selectVal.map(item => item.id).join(',')
            this.$root.$emit('setData', {
                title: '选择审批人',
                ids: idStr
            })
            this.$router.push({ query: { action: 'referCheck' } })
        },
        init(params = {
            page: '1'
        }) {
            this.$store.dispatch('getOrder', params)
        }
    },
    watch: {
        date(val, oldVal) {
            if (!val) {
                this.init()
            }
        }
    }
}
</script>
<style lang='less'>
.bizOrder {
    &-extra {
        display: flex;
        align-items: center;

        .el-input {
            width: 40%;
            margin-right: 10px;
        }
        .el-range-editor {
            width: 40%;
            margin-left: 10px;
        }
    }
    &-btn {
        margin-left: 10px;
        padding: 10px;
        cursor: pointer;
    }
    .el-button--text.danger {
        color: #ed7d74;
    }
    .el-button--text.is-disabled,
    .el-button--text.is-disabled:focus,
    .el-button--text.is-disabled:hover {
        color: #c0c4cc;
    }

    .el-range__close-icon {
        position: absolute;
        right: 2px;
        top: 1px;
    }
}
</style>
